<!--topbar-->
<nav class="topbar navbar navbar-expand-lg p-0" style="background: darkcyan" th:fragment="topbar"
     xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro">
  <div class="container">
    <a class="navbar-brand" href="#" style="color: #ffffffbf">
      <i class="bi bi-cart4"></i>
      超市购物中心
    </a>
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav me-lg-2 mb-0 mb-lg-1">
        <li class="nav-item">
          <a href="/index.html" th:class="${type == 'product' ? 'nav-link u-a-active' : 'nav-link u-a-shadow'}"><i class="bi bi-house"></i>商品中心</a>
        </li>

        <li class="nav-item">
          <a href="/user/info.html" th:class="${type == 'user' ? 'nav-link u-a-active' : 'nav-link u-a-shadow'}"><i class="bi bi-house"></i>个人中心</a>
        </li>
        <li class="nav-item">
          <a href="/about.html" th:class="${type == 'about' ? 'nav-link u-a-active' : 'nav-link u-a-shadow'}"><i class="bi bi-chat-dots"></i>关于我们</a>
        </li>
        <li class="nav-item">
          <a th:class="@{nav-link u-a-shadow}" href="/index.html"><i class="bi bi-info-circle"></i>帮助中心</a>
        </li>

        <li class="nav-item" shiro:hasRole="管理员">
          <a href="/admin.html" th:class="${type == 'admin' ? 'nav-link u-a-active' : 'nav-link u-a-shadow'}"><i class="bi bi-info-circle"></i>管理中心</a>
        </li>
      </ul>
    </div>
    <nav class="item">
      <div class="dropdown u-topbar-dropdown" th:if="${session.userInfo != null}">
        <button class="btn dropdown-toggle u-topbar-dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown"aria-expanded="true">
          <img th:src="${session.userInfo.img}" style="height: 50px; width: 50px; border-radius: 50%">
          <span th:text="${session.userInfo.username}"}></span>
        </button>
        <div class="dropdown-menu dropdown-menu-md-left u-topbar-dropdown-menu" aria-labelledby="dropdownMenuButton">
          <a class="dropdown-item u-topbar-dropdown-item" href="#">个人信息</a>
          <a class="dropdown-item u-topbar-dropdown-item" href="#">购物车</a>
          <a class="dropdown-item u-topbar-dropdown-item" href="#">购买记录</a>
          <a class="dropdown-item u-topbar-dropdown-item" th:href="@{/user/logout}">退出登陆</a>
        </div>
      </div>
      <div class="dropdown u-topbar-dropdown" th:if="${session.userInfo == null}">
        <button class="btn dropdown-toggle u-topbar-dropdown-toggle p-0" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="true">
          <img th:src="@{/images/user_visitor.png}" style="height: 50px; width: 50px; border-radius: 50%">
          <span th:text="游客"}></span>
        </button>
        <div class="dropdown-menu dropdown-menu-md-left u-topbar-dropdown-menu" aria-labelledby="dropdownMenuButton2">
          <a class="dropdown-item u-topbar-dropdown-item" href="/register.html">注册账号</a>
          <a class="dropdown-item u-topbar-dropdown-item" href="/">登陆账号</a>
        </div>
      </div>
    </nav>
  </div>
</nav>